<template>
    <div class="login">
        <div class="topbg"><img src="../../public/images/topbg.jpg" alt=""></div>
        <vue-particles
            class="particular"
            color="#3ca799"
            :particleOpacity="1"
            :particlesNumber="100"
            shapeType="circle"
            :particleSize="4"
            linesColor="#5675aa"
            :linesWidth="1"
            :lineLinked="true"
            :lineOpacity="0.8"
            :linesDistance="150"
            :moveSpeed="3"
            :hoverEffect="true"
            hoverMode="grab"
            :clickEffect="true"
            clickMode="repulse"
        ></vue-particles>
    </div>
</template>

<script>
export default {
    mounted(){
        this.$Loading.finish();
    }
}
</script>

<style lang="scss" scoped>
.login{
    background: linear-gradient(-150deg,#1c4f48,#28354b);
    .topbg{
      position: absolute;
      width: 100%;
      height: 100%;
      padding-bottom: 50px;
      overflow: hidden;
      opacity: .5;
      pointer-events: none;
  }
  .particular{
    // position: absolute;
    // overflow: hidden;
    // z-index: 0;
    // top: 0;
    // left: 0;
    // width: 100%;
    height: 100vh;
  }
} 
</style>